<template>
<div class="register">
  <div class="formBox clearfix">
    <h2>{{$t(' registerMsg.welcomeRegister')}}</h2>
    <div class="formLeft fl">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 手机注册部分 -->
        <el-tab-pane :label="$t('registerMsg.mobileRegister')" name="first">
          <el-form :label-position="labelPosition" label-width="80px" :model="mobileRegister" :rules="registerrules">
            <!-- 国籍 -->
            <el-form-item :label="$t('registerMsg.nationality')" prop="name">
              <el-select v-model="mobileRegister.r" placeholder="请选择"  class='registerSelect'>
                <el-option label="China" value="shanghai"></el-option>
                 <el-option label="HongKong(China)" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <!-- 电话号码 -->
             <el-form-item :label="$t('registerMsg.mobile')" prop="mobileNum">
              <div style="margin-top: 15px;">
              <el-input placeholder="请输入内容" v-model="mobileRegister.mobileNum" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                  <el-option label=0086 value="1"></el-option>
                  <el-option label=00852 value="2"></el-option>
                  <el-option label=00886 value="3"></el-option>
                </el-select>
              </el-input>
            </div>
            </el-form-item>
            <!-- 输入密码 -->
            <el-form-item :label="$t('registerMsg.loginPsw')" prop="password">
              <el-input v-model="mobileRegister.password" type="password"></el-input>
            </el-form-item>
            <!-- 确认密码 -->
              <el-form-item :label="$t('registerMsg.isSurePsw')" prop="isSurePSW">
              <el-input v-model="mobileRegister.isSurePSW" type="password"></el-input>
            </el-form-item>
            <!-- 邀请码 -->
              <el-form-item :label="$t('registerMsg.inviteNum')" prop="inviteNum">
              <el-input v-model="mobileRegister.inviteNum"></el-input>
            </el-form-item>
            <!-- 用户协议 -->
             <el-checkbox v-model="mobileRegister.checked">{{$t('registerMsg.agree')}}<router-link to="/">{{$t('registerMsg.agreement')}}</router-link></el-checkbox>
             <!-- 注册 -->
            <el-form-item>
               <el-button type="primary" plain>{{$t('loginMsg.register')}}</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 邮箱注册部分 -->
        <el-tab-pane :label="$t('registerMsg.emailRegister')" name="second">
          <el-form :label-position="labelPosition" label-width="80px" :model="mobileRegister" :rules="registerrules">
            <!-- 国籍 -->
            <el-form-item :label="$t('registerMsg.nationality')">
              <el-select v-model="mobileRegister.r" placeholder="请选择"  class='registerSelect'>
                <el-option label="China" value="shanghai"></el-option>
                 <el-option label="HongKong(China)" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item :label="$t('registerMsg.email')" prop="email">
               <el-input v-model="mobileRegister.email"></el-input>
            </el-form-item>
            <!-- 登陆密码 -->
            <el-form-item :label="$t('registerMsg.loginPsw')" prop="password">
              <el-input v-model="mobileRegister.type" type="password"></el-input>
            </el-form-item>
            <!-- 确认密码 -->
              <el-form-item :label="$t('registerMsg.isSurePsw')" prop="isSurePSW">
              <el-input v-model="mobileRegister.isSurePSW" type="password"></el-input>
            </el-form-item>
            <!-- 邀请码 -->
              <el-form-item  :label="$t('registerMsg.inviteNum')" prop="inviteNum">
              <el-input v-model="mobileRegister.inviteNum" type="password"></el-input>
            </el-form-item>
            <!-- 用户协议 -->
              <el-checkbox v-model="mobileRegister.checked">{{$t('registerMsg.agree')}}<router-link to="/">{{$t('registerMsg.agreement')}}</router-link></el-checkbox>
              <!-- 注册 -->
            <el-form-item>
               <el-button type="primary" plain>{{$t('loginMsg.register')}}</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        </el-tabs>
    </div>
    <div class="formRight fr">
     <p v-for="item in  formRightMsg" :key="item">{{item}}</p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data () {
    // 验证手机号码
    var checkMobileNum = (rule, value, callback) => {
      let mobileReg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        !mobileReg.test(value) ? callback(new Error('电话号码要求11位数字')) : callback()
      }, 1000)
    }
    // 验证密码
    var checkPass = (rule, value, callback) => {
      let passwordReg = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/
      if (!value) {
        return callback(new Error('密码不能为空'))
      }
      setTimeout(() => {
        !passwordReg.test(value) ? callback(new Error('最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符')) : callback()
      }, 1000)
    }
    // 再次验证密码
    var isSurePSW = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.mobileRegister.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    // 验证邀请码
    var checkInviteNum = (rule, value, callback) => {
      let inviteNum = /^\d{4}$/
      setTimeout(() => {
        !inviteNum.test(value) ? callback(new Error('邀请码为4位数字')) : callback()
      }, 1000)
    }
    // 验证邮箱
    var checkEmail = (rule, value, callback) => {
      let emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        !emailReg.test(value) ? callback(new Error('请输入正确的邮箱地址')) : callback()
      }, 1000)
    }
    return {
      labelPosition: 'top',
      activeName: 'first',
      formRightMsg: this.$t('registerMsg.formRight'),
      select: '',
      mobileRegister: {
        r: '',
        name: '',
        region: '',
        password: '',
        isSurePSW: '',
        inviteNum: '',
        mobileNum: '',
        email: '',
        checked: true
      },
      registerrules: {
        mobileNum: [
          { validator: checkMobileNum, trigger: 'blur' }
        ],
        password: [{
          validator: checkPass, trigger: 'blur'
        }],
        isSurePSW: [{
          validator: isSurePSW, trigger: 'blur'
        }],
        inviteNum: [{
          validator: checkInviteNum, trigger: 'blur'
        }],
        email: [{
          validator: checkEmail, trigger: 'blur'
        }]

      }
    }
  },
  methods: {
    // 切换tab页面
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.register {
  .formBox {

    h2 {
      font-size: 40px;
      padding: 20px 0;
    }
    width: 1200px;
    margin: 100px auto;
    background: #ccc;
    .registerSelect {
      color: #fff;
      width: 518px;
      margin: 0;
    }
    .el-button{
      width: 200px;
      margin-top: 30px;
    }
    .formRight {
      margin-right: 150px;
      margin-top: 60px;
      p {
        padding-top: 30px;
      }
    }
  }
}
</style>
